<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="keywords" content="前端, 简历, 前端工程师简历" />
    <title>封富 -- 前端开发</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1476539910_8766227.css">
    <link rel="stylesheet" href="css/index.css">
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <header class="theme-1">
    <div class="topbar theme-1 clearfix">
      <ul class="clearfix">
        <li><a target="_blank" href="https://feng-fu.github.io" class="iconfont icon-iconblog"></a></li>
        <li><a target="_blank" href="https://www.zhihu.com/people/duo-cai-51" class="iconfont icon-zhihu"></a></li>
        <li><a target="_blank" href="http://weibo.com/1802702177/profile?rightmod=1&wvr=6&mod=personinfo" class="iconfont icon-unie61d"></a></li>
        <li><a target="_blank" href="https://github.com/feng-fu" class="iconfont icon-github"></a></li>
        <li><a target="_blank" href="https://www.douban.com/people/84857292/" class="iconfont icon-douban"></a></li>
      </ul>
      <div class="hire"><a href="mailto:fengfu2016@gmail.com"  class="theme-1"><span class="iconfont icon-feiji"></span> 戳我共事</a></div>
    </div>
    <div class="intro">
      <h1>封富</h1>
      <h4>前端开发</h4>
      <p>热爱coding，曾学过Objective-C、Python等，最后还是选择前端之路，相较而言，这种将代码变成页面效果的愉悦胜过其他，因为热爱，所以更有兴趣，也更愿意在其中探索奥秘；</p>
      <p>熟悉Web标准，对原生js面向对象有所研究，热爱新技术，擅用各种前端工具，思维活跃，好奇心强，具有较强的学习能力，活跃于github、coding和一些前端开发社区；</p>
      <p>具有一定的代码洁癖，责任心强。</p>
    </div>
    <div class="contact theme-1">
      <ul>
        <li><a href="mailto:fengfu2016@gmail.com" class="iconfont icon-gmail"> fengfu2016@gmail.com</a></li>
        <li><a href="tel:13558719561" class="iconfont icon-tel"> 13558719561</a></li>
        <li><a target="_blank" href="https://feng-fu.github.io" class="iconfont icon-iconblog"> feng-fu.github.io</a></li>
      </ul>
    </div>
  </header>
  <nav class="theme-1">
    <ul class="clearfix">
      <li><a href="#skill">拥有技能</a></li>
      <li><a href="#experience">工作经历</a></li>
      <li><a href="#portfolio">作品展示</a></li>
      <li><a href="#info">个人信息</a></li>
    </ul>
  </nav>
  <main>
    <div id="skill" class="layout">
      <h1>拥有技能</h1>
      <ul class="clearfix">
        <li>
          <div class="progress theme-1 html">90%</div>
          <h4>HTML&amp;CSS</h4>
          <p>精通HTML和CSS，熟练手写符合W3C规范的语义化页面</p>
        </li>
        <li>
          <div class="progress theme-1 html5">70%</div>
          <h4>HTML5&amp;CSS3</h4>
          <p>熟悉HTML5语义化标签，熟练使用HTML5和CSS3常用新特性.<a target="_blank" href="https://feng-fu.github.io/works/CSS3/" class="css3-loading">&gt;各种loading效果.</a></p>
        </li>
        <li>
          <div class="progress theme-1 js">80%</div>
          <h4>JavaScript</h4>
          <p>熟悉ECMAScript语法,原生BOM/DOM,JSON, JSONP以及JS的原型和原型链等,并对JS的设置模式有所理解,且代码风格良好.</p>
        </li>
        <li>
          <div class="progress theme-1 jquery">85%</div>
          <h4>Query/Zepto</h4>
          <p>熟悉jQuery/Zepto,手写jQuery插件实现常见效果,并对jQuery源码进行过研究.<br><br></p>
        </li>
        <li>
          <div class="progress theme-1 webpack">65%</div>
          <h4>Requirejs/Webpack</h4>
          <p>能使用webpack、requirejs进行代码的压缩打包.</p>
        </li>
        <li>
          <div class="progress theme-1 bootstrap">75%</div>
          <h4>Bootstrap</h4>
          <p>使用Bootstrap完成常见响应式页面.</p>
        </li>
      </ul>
      <div class="more">
        <h3>MORE...</h3>
        <span>HTTP</span>
        <span>GIT</span>
        <span>Handlebars</span>
        <span>SEO</span>
        <span>AJAX</span>
        <span>Node.js</span>
        <span>LESS</span>
        <span>Promise</span>
        <span>Vuejs</span>
        <span>ES6</span>
        <span>...</span>
      </div>
    </div>
    <div id="experience" class="layout clearfix">
      <h1>工作经历</h1>
      <div class="tree">
        <div class="experience pre">
          <h4 class="company">四川建安工业有限责任公司</h4>
          <small>2015/7~2016/10</small>
          <p>负责公司管理看板系统前端页面的开发和维护，主要使用jQuery和Bootstrap完成页面的实现和交互工作。</p>
        </div>
        <div class="experience">
          <h4>外包团队</h4>
          <small>2016/8~2016/10</small>
          <p>参与北京某公司标准管理系统的开发，负责团队中前端页面的实现，主要使用Bootstrap来完成页面功能。</p>
        </div>
      </div>
    </div>
    <div id="portfolio" class="layout">
      <h1>作品展示</h1>
      <ul class="clearfix">
        <li>
          <div class="list">
            <img src="source/music_player-min.png" alt="">
            <a target="_blank" href="http://feng_fu.oschina.io/works/music_player/">
              <div class="descri">
                <h4>音乐播放器</h4>
                <p>一个在线音乐播放器，数据源来自百度音乐API，实现播放、暂停、下一首、歌词显示、进度条拖动等常规音乐播放器具备的功能.</p>
              </div>
            </a>
            <div class="btn-group clearfix">
              <a target="_blank" href="https://github.com/feng-fu/works/tree/master/music_player" class="left  theme-1">Code</a>
              <a target="_blank" href="http://feng_fu.oschina.io/works/music_player/" class="right  theme-1">Demo</a>
            </div>
          </div>
        </li>
        <li>
          <div class="list">
            <img src="source/shopping-min.png" alt="">
            <a target="_blank" href="https://feng-fu.github.io/works/shopping/">
              <div class="descri">
                <h4>在线购物商城</h4>
                <p>一个女性在线购物商城，整合首屏轮播，店铺商品搜索切换，电商常用整站导航条，顶部粘连搜索框以及回到顶部等功能，代码使用Webpack进行打包.</p>
              </div>
            </a>
            <div class="btn-group clearfix">
              <a target="_blank" href="https://github.com/feng-fu/works/tree/master/shopping" class="left theme-1">Code</a>
              <a target="_blank" href="https://feng-fu.github.io/works/shopping/" class="right theme-1">Demo</a>
            </div>
          </div>
        </li>
        <li>
          <div class="list">
            <img src="source/website-min.png" alt="">
            <a target="_blank" href="https://feng-fu.github.io/works/requirejs-page/">
              <div class="descri">
                <h4>企业站</h4>
                <p>常用企业站，包含常见前端效果:首页全屏轮播,导航条stickup,图片预加载,模块曝光淡入加载,滚动监听以及回到顶部等功能,并使用requirejs进行打包.</p>
              </div>
            </a>
            <div class="btn-group clearfix">
              <a target="_blank" href="https://github.com/feng-fu/works/tree/master/requirejs-page/" class="left theme-1">Code</a>
              <a target="_blank" href="https://feng-fu.github.io/works/requirejs-page/" class="right theme-1">Demo</a>
            </div>
          </div>
        </li>
        <li>
          <div class="list">
            <img src="source/server-min.png" alt="">
            <a target="_blank" href="https://www.npmjs.com/package/mark-server">
              <div class="descri">
                <h4>Markdown预览服务器</h4>
                <p>一个基于Node.js的markdown预览server，且兼备静态服务器功能，一键打开浏览器预览，且能传入参数打开指定文件，判断为.md文件时，将其进行解析并在浏览器上进行渲染.</p>
              </div>
            </a>
            <div class="btn-group clearfix">
              <a target="_blank" href="https://github.com/feng-fu/mark-server/" class="left theme-1">Code</a>
              <a target="_blank" href="https://www.npmjs.com/package/mark-server" class="right theme-1">Demo</a>
            </div>
          </div>
        </li>
        <li>
          <div class="list">
            <img src="source/jsonp-min.png" alt="">
            <a target="_blank" href="#">
              <div class="descri">
                <h4>新浪新闻摘要</h4>
                <p>利用jsonp抓取新浪新闻摘要，将摘要内容通过瀑布流的方式布局在页面上，并采用曝光加载实现滚动无限加载功能.</p>
              </div>
            </a>
            <div class="btn-group clearfix">
              <a target="_blank" href="https://github.com/feng-fu/works/tree/master/jsonp" class="left theme-1">Code</a>
              <a target="_blank" href="https://feng-fu.github.io/works/jsonp/" class="right theme-1">Demo</a>
            </div>
          </div>
        </li>
        <li>
          <div class="list">
            <img src="source/vuejs.png" alt="">
            <a target="_blank" href="#">
              <div class="descri">
                <h4>简单人员管理系统</h4>
                <p>基于Vue.js实现的一个人员管理系统，实现人员的增删，并利用localStorage进行数据的存储，实现刷新页面后数据不会丢失.</p>
              </div>
            </a>
            <div class="btn-group clearfix">
              <a target="_blank" href="https://github.com/feng-fu/vue-list" class="left theme-1">Code</a>
              <a target="_blank" href="https://feng-fu.github.io/vue-list/" class="right theme-1">Demo</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div id="info" class="layout clearfix">
      <h1>了解更多...</h1>
      <div class="left">
        <p><span>学历：</span><span>大学本科</span></p>
        <p><span>技能：</span><span>英语四级</span></p>
        <p class="indent"><span>计算机三级网络技术</span></p>
        <ul class="clearfix">
          <li><a target="_blank" href="https://feng-fu.github.io" class="iconfont icon-iconblog"></a></li>
          <li><a target="_blank" href="https://www.zhihu.com/people/duo-cai-51" class="iconfont icon-zhihu"></a></li>
          <li><a target="_blank" href="http://weibo.com/1802702177/profile?rightmod=1&wvr=6&mod=personinfo" class="iconfont icon-unie61d"></a></li>
          <li><a target="_blank" href="https://github.com/feng-fu" class="iconfont icon-github"></a></li>
          <li><a target="_blank" href="https://www.douban.com/people/84857292/" class="iconfont icon-douban"></a></li>
        </ul>
      </div>
      <div class="right">
        <p>日常使用GIT做版本控制，使用sublime/Atom/WebStorm进行开发，也在尝试新的工具，如Vim.</p>
        <p>使用Markdown编写文档，撰写博客.</p>
        <p>使用Google+github关键词来搜寻好用的库，在Stackoverflow上寻求问题解决之道.</p>
        <p>把MDN当做文档来查，热爱书籍，啃各种技术文档.</p>
        <p>在npm上了解更多好用的工具，也参与其中希望能贡献一份力.</p>
      </div>
    </div>
  </main>
  <div id="top" class="iconfont icon-up theme-1"></div>
  <div id="color-picker" class="clearfix">
    <div class="iconfont icon-shezhi picker"></div>
    <div class="theme">
      <h4>选择主题</h4>
      <ul class="clearfix">
        <li class="theme-1 active"></li>
        <li class="theme-2"></li>
        <li class="theme-3"></li>
        <li class="theme-4"></li>
        <li class="theme-5"></li>
        <li class="theme-6"></li>
        <li class="theme-7"></li>
        <li class="theme-8"></li>
        <li class="theme-9"></li>
      </ul>
    </div>
  </div>

    <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/top.js"></script>
    <script src="js/picker.js"></script>
    <script src="js/stickup.js"></script>
  </body>
</html>
